/// <reference path="_variables-shared.scss" />
/// <reference path="_mixins.scss" />
/// <reference path="../lib/bs4/scss/bootstrap.scss" />

$btn-wide-padding-x: 1.8rem;
$btn-wide-padding-x-lg: 2.5rem;
$btn-wide-padding-x-sm: 1.2rem;

$btn-size: $input-height;
$btn-size-lg: $input-height-lg;
$btn-size-sm: $input-height-sm;

@mixin btn-padding($p) {
    padding-left: $p;
    padding-right: $p;
}

@mixin btn-square($size) {
    width: $size;
    height: $size;
    line-height: $size;
}


// Make icon font-size 14px in small buttons
// (looks ugly otherwise)
// -----------------------------------------------------

.btn-sm > .fa {
    font-size: 14px;
}


// btn-(outline-)(secondary|light)
// looks really shitty in BS4, style it decently.
// -----------------------------------------------------

@if $enable-lightbtn-tweak {
    .btn-outline-secondary,
    .btn-outline-light {
        color: $yiq-text-dark;
        border-color: $input-border-color;

        &:not([disabled]):not(.disabled):hover {
            border-color: darken($input-border-color, 8%);
        }

        &.disabled,
        &[disabled] {
            color: $yiq-text-dark;
            border-color: $input-border-color;
        }

        &:not([disabled]):not(.disabled):active,
        &:not([disabled]):not(.disabled).active,
        .show > &.dropdown-toggle {
            background-color: darken($secondary, 5%);
            border-color: darken($input-border-color, 5%);
        }
    }

    .btn-outline-secondary {
        color: $yiq-text-dark;
    }

    .btn-outline-light {
        color: $gray-600;
    }
}


// Input groups
// Light addon buttons without border look shitty
// -----------------------------------------------------

.input-group > .input-group-append > .btn-secondary,
.input-group > .input-group-append > .btn-light,
.input-group > .input-group-prepend > .btn-secondary,
.input-group > .input-group-prepend > .btn-light { 
    border-color: $input-border-color;
}


// btn-icon, btn-circle
// --------------------------------------------------

.btn.btn-icon,
.btn.btn-circle {
    position: relative;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    @include btn-square($btn-size);

    &.btn-lg {
        @include btn-square($btn-size-lg);
    }

    &.btn-sm {
        @include btn-square($btn-size-sm);
    }
    // Move caret to bottom right corner
    &.dropdown-toggle:after {
        position: absolute;
        right: 3px;
        bottom: 0.5em;
    }
}

.btn.btn-circle {
    border-radius: 50%;
}


// Social buttons
// --------------------------------------------------

@if $enable-social-buttons {
    .btn-brand-facebook,
    .btn-brand-facebook-f {
        @include button-variant($clr-brand-facebook, $clr-brand-facebook);
    }

    .btn-brand-twitter {
        @include button-variant($clr-brand-twitter, $clr-brand-twitter);
    }

    .btn-brand-youtube {
        @include button-variant($clr-brand-youtube, $clr-brand-youtube);
    }

    .btn-brand-pinterest,
    .btn-brand-pinterest-p {
        @include button-variant($clr-brand-pinterest, $clr-brand-pinterest);
    }

    .btn-brand-google {
        @include button-variant($clr-brand-google2, $clr-brand-google2);
    }

    .btn-brand-instagram {
        @include button-variant($clr-brand-instagram, $clr-brand-instagram);
    }

    .btn-brand-linkedin {
        @include button-variant($clr-brand-linkedin, $clr-brand-linkedin);
    }

    .btn-brand-xing {
        @include button-variant($clr-brand-xing, $clr-brand-xing);
    }

    .btn-brand-microsoft {
        @include button-variant($clr-brand-microsoft, $clr-brand-microsoft);
    }
}


// btn-flat
// --------------------------------------------------

.btn-flat {
    color: $yiq-text-dark;
    background-image: none;
    background-color: transparent;
    border-color: transparent;
    box-shadow: none;

    &.disabled,
    &[disabled] {
        color: $yiq-text-dark;
        background-image: none;
        background-color: transparent;
        border-color: transparent;
    }
}

.btn-flat-light {
    color: rgba(#fff, 0.8);

    &.disabled,
    &[disabled] {
        color: rgba(#fff, 0.8);
    }

    &:not([disabled]):not(.disabled):hover,
    &:active,
    &.active,
    .show > &.dropdown-toggle {
        border-color: rgba(#fff, 1);
    }

    &:focus {
        box-shadow: 0 0 0 2px rgba(#fff, .25);
    }
}


// btn-clear
// --------------------------------------------------

.btn.btn-clear {
    color: $yiq-text-light;
    background: rgba(#fff, 0);
    border-color: rgba(#fff, 0.6);
    box-shadow: none;

    &:hover {
        color: $yiq-text-light;
        background: rgba(#fff, 0.15);
    }

    &:focus {
        border-color: #fff;
        box-shadow: 0 0 0 2px rgba(#fff, .25);
    }

    &.disabled,
    &[disabled] {
        background: rgba(#fff, 0);
        border-color: rgba(#fff, 0.6);
    }

    &:not([disabled]):not(.disabled):active,
    &:not([disabled]):not(.disabled).active,
    .show > &.dropdown-toggle {
        color: $yiq-text-light;
        border-color: #fff;
        box-shadow: none;
    }
}

.btn.btn-clear-dark {
    color: $yiq-text-dark;
    background: transparent;
    border-color: rgba(#000, 0.15);
    box-shadow: none;

    &:hover {
        color: darken($yiq-text-dark, 8%);
        background: rgba(#000, 0.06);
        border-color: rgba(#000, 0.2);
    }

    &:focus {
        border-color: rgba(#000, 0.2);
        box-shadow: 0 0 0 3px rgba(#000, .05);
    }

    &.disabled,
    &[disabled] {
        background: transparent;
        border-color: rgba(#000, 0.15);
        box-shadow: none;
    }

    &:not([disabled]):not(.disabled):active,
    &:not([disabled]):not(.disabled).active,
    .show > &.dropdown-toggle {
        color: darken($yiq-text-dark, 8%);
        box-shadow: inset 0 3px 5px rgba(#000, 0.125) !important;
    }
}


// btn-labeled
// --------------------------------------------------

.btn.btn-labeled {
    $w-md: $input-height-inner * 0.85;
    $w-sm: $input-height-inner-sm * 0.85;
    $w-lg: $input-height-inner-lg * 0.85;
    position: relative;
    padding-left: $w-md + $input-btn-padding-x;

    > b {
        position: absolute;
        display: block;
        width: $w-md;
        left: 0;
        top: 0;
        bottom: 0;
        background-color: rgba(0,0,0, .12);

        > i, > .bi {
            position: relative;
            vertical-align: middle;
            //transform: translate(0, 50%);
            line-height: $btn-size;
        }
    }

    &.btn-lg {
        padding-left: $w-lg + $input-btn-padding-x-lg;

        > b {
            width: $w-lg;

            > i {
                line-height: $btn-size-lg;
            }
        }
    }

    &.btn-sm {
        padding-left: $w-sm + $input-btn-padding-x-sm;

        > b {
            width: $w-sm;

            > i {
                line-height: $btn-size-sm;
            }
        }
    }

    &.icon-right {
        padding-left: $input-btn-padding-x;
        padding-right: $w-md + $input-btn-padding-x;

        > b {
            left: auto;
            right: 0;
        }
    }
}


// btn-animate
// --------------------------------------------------

.btn.btn-animate {
    position: relative;
    overflow: hidden;
    padding-left: $input-btn-padding-x * 1.5;
    padding-right: $input-btn-padding-x * 1.5;
    transition: all 0.2s ease-out;

    > span {
        display: block;
        width: 100%;
        height: 100%;
        transition: transform 0.2s ease-out;
        transform: translateX(0);

        > i {
            position: absolute;
            display: inline-block;
            left: 0;
            top: 0;
            bottom: 0;
            width: 1.8em;
            text-align: left;
            opacity: 0;
            line-height: inherit;
            transition: opacity 0.2s ease-out;
            transform: translateX(-100%);

            &:before {
                position: absolute;
                left: 50%;
                top: 50%;
                transform: translate(-50%, -50%);
            }
        }
    }

    &:hover > span {
        transform: translateX(10px);

        > i, > .bi {
            opacity: 1;
        }
    }

    &.btn-lg {
        padding-left: $input-btn-padding-x-lg * 1.5;
        padding-right: $input-btn-padding-x-lg * 1.5;
    }

    &.btn-sm {
        padding-left: $input-btn-padding-x-sm * 1.5;
        padding-right: $input-btn-padding-x-sm * 1.5;
    }
}

.btn-animate.btn-animate-right {
    > span > i {
        left: auto;
        right: 0;
        text-align: right;
        transform: translateX(100%);
    }

    &:hover > span {
        transform: translateX(-10px);
    }
}

.btn-animate.btn-animate-down {
    > span {
        text-align: center;
    }

    > span > i {
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        width: 100%;
        text-align: center;
        vertical-align: middle;
        transform: translateY(-150%);
    }

    &:hover > span {
        transform: translateY(150%);
    }
}

.btn-animate.btn-animate-down.btn-lg {
    > span > i {
        font-size: 1.5rem;
        line-height: 1.5rem;
    }
}


// btn-to-[danger|primary]
// --------------------------------------------------

@mixin button-hybrid-variant($background, $border, $hover-background: darken($background, 7.5%), $hover-border: darken($border, 10%), $active-background: darken($background, 10%), $active-border: darken($border, 12.5%)) {
    // The mixin parameters were copied over from Bootstrap's original button-variant() mixin
    transition: box-shadow .15s ease-in-out;

    &:not([disabled]):not(.disabled):hover {
        color: color-yiq($hover-background);
        @include gradient-bg($hover-background);
        border-color: $hover-border;

        > i {
            opacity: 1;
        }
    }

    &:hover:focus {
        box-shadow: $btn-box-shadow, 0 0 0 $btn-focus-width rgba($border, .5) !important;
    }
}

.btn.btn-to-danger {
    @include button-hybrid-variant($danger, $danger);
}

.btn.btn-to-primary {
    @include button-hybrid-variant($primary, $primary);
}

// btn-no-border
// --------------------------------------------------

.btn-no-border {
    border-color: transparent !important;
}


// .mf-dropdown (Mobile Friendly dropdown)
// --------------------------------------------------

.mf-dropdown {
    display: inline-block;
    position: relative;

    .btn {
        position: relative;
    }

    .btn > em {
        font-style: normal;
        font-variant: normal;
        font-weight: normal;
        color: $text-muted;
        font-size: $font-size-sm;
        font-size: 0.85em; // make it smaller
    }

    .btn > em > span {
        font-weight: $font-weight-medium;
        font-size: 1.166666em; // make it regular again
        color: $body-color;
    }

    .btn.has-caret {
        text-align: left;
        padding-right: $input-btn-padding-x * 2;

        &.btn-sm {
            padding-right: $input-btn-padding-x-sm * 2;
        }

        &.btn-lg {
            padding-right: $input-btn-padding-x-lg * 2;
        }

        > em,
        > span {
            display: block;
            margin-bottom: 1px; // equalizes button heights
            @include text-truncate();
        }
    }

    .btn.has-caret:after {
        @include fontawesome("\f0d7");
        position: absolute;
        display: block;
        right: $input-btn-padding-x;
        line-height: 1;
        top: 50%;
        transform: translate3d(50%, -50%, 0);
    }

    .btn-sm.has-caret:after {
        right: $input-btn-padding-x-sm;
    }

    .btn-lg.has-caret:after {
        right: $input-btn-padding-x-lg;
    }

    select {
        position: absolute;
        opacity: 0;
        left: 0;
        width: 100%;
        top: 0;
        bottom: 0;
        cursor: pointer;
    }
}


// 3d Buttons (colorized drop shadows)
// -----------------------------------------------------

.btn-3d {
    transition-property: transform, box-shadow, color, background-color, border-color, opacity;
    transition-timing-function: cubic-bezier(0.25, 1, 0.33, 1);
    transition-duration: .35s;
    --shadow-color-rgb: 0,0,0;
    --shadow-intensity: 1;
    --box-shadow: 0 1px 1px rgba(var(--shadow-color-rgb), calc(var(--shadow-intensity) * 0.07)), 
                  0 2px 4px rgba(var(--shadow-color-rgb), calc(var(--shadow-intensity) * 0.1)), 
                  0 4px 8px rgba(var(--shadow-color-rgb), calc(var(--shadow-intensity) * 0.08));
    --box-shadow: #{$box-shadow-xs-var};
    // NORMAL
    box-shadow: var(--box-shadow) !important;
    // ACTIVE
    &:hover,
    &:focus {
        transform: translateY(-3px);
        --box-shadow: #{$box-shadow-var};
    }
    // DISABLED
    &:disabled,
    &.disabled {
        box-shadow: none !important;
    }
    // PRESSED
    &:active, &:active:focus,
    &.active, &.active:focus,
    .show > &.dropdown-toggle,
    .show > &.dropdown-toggle:focus {
        transform: translateY(1px);
        --box-shadow: #{$box-shadow-xs-var};
    }
}

@each $color, $value in $theme-colors {
    .btn-3d.btn-#{$color},
    .btn-3d.btn-outline-#{$color} {
        @if $color != "secondary" and $color != "light" {
            $c: mix($value, #000, 50%);
            --shadow-color-rgb: #{red($c)}, #{green($c)}, #{blue($c)};
            --shadow-intensity: 1.8;
        }
        @else {
            border-color: $value !important;
        }

        @if $color == 'secondary' {
            // ACTIVE
            &:hover,
            &:focus {
                background-color: #fff;
            }
            // PRESSED
            &:active, &:active:focus,
            &.active, &.active:focus,
            .show > &.dropdown-toggle,
            .show > &.dropdown-toggle:focus {
                background-color: $gray-100;
                border-color: $gray-100;
            }
        }
    }
}